<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js" type="text/javascript"></script>
    <script src="jquery.1.8.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
        <table border="1" width="50%" style="border-collapse: collapse">
                <tr>
                  <th>账号</th>
                  <th>密码</th>
                  <th>姓名</th>
                </tr>
                <tr align="center" v-for="item in users">
                  <td>{{item.loginName}}</td>
                  <td>{{item.pwd}}</td>
                  <td>{{item.name}}</td>
                </tr>
              </table>
</div>
<input type="button" value="加载" @click="load()" />
</body>


<script>
  var vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    methods: {
      // 添加学生信息
      // load () {
      //   //var student = {grade: '1', name: '张三', gender: '男', age: 25}

      //   var that=this;
      //   $.get("http://api.tutestudio.net/api/getUser",'',function(res){
      //     console.log(res)
      //     var json=res.data;
      //     for(var i=0;i<json.length;i++){
      //       that.users.push(json[i])
      //     }
      //   })
      //   this.users.push(student)
      // }
    },
      created(){
        var that=this;
        $.get("http://api.tutestudio.net/api/getUser",'',function(res){
          console.log(res)
          var json=res.data;
          for(var i=0;i<json.length;i++){
            that.users.push(json[i])
          }
        })
        this.users.push(student)
      }
    
  })
</script>
</html>